<template>
	<view>
		<view class="module">
			<uNavbar title="" bgColor="transparent" leftIconColor="#ffffff"></uNavbar>
			<image  :src="mjBgimg.brand_activity_images" mode="aspectFill"></image>
			<view class="reward flex_c" data-url="/pagesMy/secretRealm/rewardDetails" @click="allJump">
				<image src="../../static/icon/i_jlmx.png" mode=""></image>
				<text>奖励明细</text>
			</view>
			<view class="reward_s flex_c" data-url="/pagesMy/secretRealm/adventureRecord" @click="allJump">
				<image src="../../static/icon/i_txjj.png" mode=""></image>
				<text>探险记录</text>
			</view>
			<view class="activityRules flex_ZC"  data-url="/pagesMy/secretRealm/secretRule" @click="allJump">
				<text>活动规则</text>
			</view>
		</view>
		<view class="secret" v-for="(item,index) in newsList" :key="item.id" @click="goDetails(item.id)" >
			<view class="secret_box">
				<text class="status">{{item.status_desc}}</text>
				<view class="heat flex_dq">
					<image src="../../static/image/fire.png" mode=""></image>
					<text class="c0">参与人数:{{item.involved_number}}</text>
				</view>
				<image  class="hotimg"  :src="item.activity_images"  mode=""></image>
				<view class="official flex_Z">
					<text>{{item.name}}</text>
					<text style="font-size: 16rpx;">{{item.start_time}}- {{item.end_time}}</text>
				</view>
				<image class="thumbnail"  :src="item.details_images" mode="aspectFill"></image>
			</view>
			<view class="introduce flex_Z">
				<text class="c3">{{item.name}}</text>
				<text class="c5">专属遗迹</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {brandActivity,secretConfig} from "../../api/secretRealm.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				newsList:[],
				mjBgimg:{}
			}
		},      
		onLoad() {
			this.initConfig()
		},
		onShow() {
			this.initList()
		},
		methods: {
			// 初始化列表
			initList() {
				let data = {
					page:this.page,
				}
				brandActivity(data).then(res => {
					console.log(11111,res);
					if (res.code == 1) {
						let list = res.data.data;
						this.newsList = this.page == 1 ? list : this.newsList.concat(list);
						console.log(this.newsList);
						if (list.length < this.size) this.status = 'nomore';
					}
				})
			},
			// 配置文件
			initConfig(){
				secretConfig({}).then(res => {
					console.log(11111,res);
					if (res.code == 1) {
						this.mjBgimg = res.data
					}
				})
			},
			allJump(e) {
				let {url} = e.currentTarget.dataset
				uni.navigateTo({ 
					url: url
				})
			}, 
			goDetails(id){
				uni.navigateTo({
					url:'/pagesMy/secretRealm/exclusiveSecretRealm?id='+id
				})
			}
		},
	}
</script>

<style scoped>
	 @font-face{
	     font-family: 'iconfont2';
	     src:url("~@/iconfont/YouSheBiaoTiHei.ttf");
	 }
.module{
	position: relative;
	width: 750rpx;
	height: 690rpx;
}
.module>image{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.7;
}

.reward{
	position: absolute;
	top: 180rpx;
	right: 0;
	font-size: 24rpx;
	color: #ffffff;
	width: 178rpx;
	height: 60rpx;
	background: #1E173280;
	border-radius: 56rpx 0rpx 0rpx 56rpx;
	/* opacity: 0.8; */
}
.reward>image{
	width: 26rpx;
	height: 26rpx;
	margin-right: 14rpx;
}
.reward_s{
	position: absolute;
	top: 260rpx;
	right: 0;
	font-size: 24rpx;
	color: #ffffff;
	width: 178rpx;
	height: 60rpx;
	background: #1E173280;
	border-radius: 56rpx 0rpx 0rpx 56rpx;
	/* opacity: 0.8; */
}
.reward_s>image{
	width: 26rpx;
	height: 36rpx;
	margin-right: 14rpx;
}
.activityRules{
	position: absolute;
	top: 350rpx;
	right: 0;
	font-size: 24rpx;
	color: #ffffff;
	width: 50rpx;
	padding: 10rpx 10rpx 10rpx 14rpx;
	background: #1E173280;
}
.secret{
	width: 664rpx;
	background: #F2F2F2;
	margin: 0 auto 30rpx;
	transform: translateY(-80rpx);
	border-radius:40rpx 36rpx 18rpx 18rpx;
}
.secret_box{
	position: relative;
	width: 100%;
	height: 306rpx;
	/* background: skyblue; */
	margin-bottom: 30rpx;
	border-radius:40rpx;
	/* background: linear-gradient(90deg, rgba(203, 39, 230, 0.8), rgba(18, 22, 253, 0.8)); */
}
.hotimg{
	width: 100%;
	height: 100%;
}
.status{
	position: absolute;
	top: 10rpx;
	left: 60rpx;
	font-size: 32rpx;
	color: #ffffff;
	z-index: 9;
}
.heat{
	position: absolute;
	top: 24rpx;
	right: 50rpx;
	color: #EED581;
	z-index: 9;
	font-size: 28rpx;
}
.heat>image{
	width: 28rpx;
	height: 28rpx;
	margin-right: 4rpx;
}
.official{
	position: absolute;
	top: 80rpx;
	left: 0;
	width: 300rpx;
	font-size: 72rpx;
	color: #ffffff;
	z-index: 9;
	font-family: iconfont2;
	margin-left: 30rpx;
}
.thumbnail{
	position: absolute;
	top: 88rpx;
	right: 50rpx;
	width: 156rpx;
	height: 156rpx;
	border-radius: 30rpx;
}
.introduce{
	margin-left: 26rpx;
	padding-bottom: 20rpx;
	margin-top: -10rpx;
}
.introduce>text:nth-child(1){
	font-size: 32rpx;
	margin-bottom: 16rpx;
}
.introduce>text:nth-child(2){
	width: 148rpx;
	height: 52rpx;
	background: #dbdad0;
	border-radius:12rpx;
	font-size: 28rpx;
	text-align: center;
	line-height: 52rpx;
}
	/deep/.u-navbar__content__title{
		color: #ffffff !important;
	}

</style>